<template>
  <!-- 筛选产品list -->
  <div class="body">
    <Header @SearchBtn="SearchBtn" :menuIndex="menuIndex"></Header>
    <div class="cennterContent">
      <div class="ListContent">
        <!-- 筛选部分 -->
        <div>
          <!-- 选择完的条件 -->
          <div class="w" id="J_crumbsBar">
            <div class="crumbs-bar clearfix">
              <div class="crumbs-nav">
                <div class="crumbs-nav-main clearfix">
                  <div class="crumbs-nav-item one-level">
                    <div class="crumbs-link">Solution Filter</div>
                    <i class="crumbs-arrow">&gt;</i>
                  </div>

                  <!--通过typeList区分 -->
                  <div class="filterList">
                    <a
                      class="crumb-select-item"
                      rel="nofollow"
                      v-for="(item, index) in SetFilterList"
                      :key="index"
                    >
                      <b>{{ item.type }}:</b>
                      <em>{{ item.name }}</em>
                      <i @click="delFliter(index)" class="delIcon"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 筛选选择框 -->

          <div id="J_selector" class="selector">
            <div class="J_selectorLine s-category">
              <div class="sl-wrap">
                <div class="sl-key">
                  <strong>Department</strong>
                </div>
                <div class="sl-value" v-if="DepartmentInfo.length>0">
                  <div class="sl-v-list">
                    <ul class="J_valueList flex">
                      <div
                        v-for="(item, index) in DepartmentInfo"
                        :key="index"
                        @click="addtFiltertype(item,'Department')"
                      >
                        <li>
                          <a>
                            <i></i>
                            {{ item.DeptName }}
                          </a>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="J_selectorLine s-category">
              <div class="sl-wrap">
                <div class="sl-key">
                  <strong>City</strong>
                </div>
                <div class="sl-value" v-if="CityInfo.length>0">
                  <div class="sl-v-list">
                    <ul class="J_valueList flex">
                      <div
                        v-for="(item, index) in CityInfo"
                        :key="index"
                        @click="addtFiltertype(item,'City')"
                      >
                        <li v-if="index<7">
                          <a :alt="item.City">
                            <i></i>
                            {{ item.City }}
                          </a>
                        </li>
                        <li v-if="index>7 && isShowAllCity==true">
                          <a :alt="item.City">
                            <i></i>
                            {{ item.City }}
                          </a>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="sl-ext">
                <a-button @click="showAllProject('city')">
                  More
                  <a-icon type="down" />
                </a-button>
              </div>
            </div>
            <div class="J_selectorLine s-category">
              <div class="sl-wrap">
                <div class="sl-key">
                  <strong>Company Name</strong>
                </div>
                <div class="sl-value" v-if="CompanyInfo.length>0">
                  <div class="sl-v-list">
                    <ul class="J_valueList flex">
                      <div
                        v-for="(item, index) in CompanyInfo"
                        :key="index"
                        @click="addtFiltertype(item,'Company')"
                      >
                        <li v-if="index<7">
                          <a>
                            <i></i>
                            {{ item.Company }}
                          </a>
                        </li>
                        <li v-if="index>7 && isMoreCompany==true">
                          <a>
                            <i></i>
                            {{ item.Company }}
                          </a>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="sl-ext">
                <a-button @click="showAllProject('company')">
                  More
                  <a-icon type="down" />
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 方案列表 -->
      <div class="solutionListBox filter">
        <!-- <div class="f-line top flex">
          <div class="f-sort">
            <a @click="SearchAllList('hot')" :class="listSortIndex===0?'curr':''">
              <span class="fs-tit">ActiveValue</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="hotStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>
            <a @click="SearchAllList('time')" :class="listSortIndex===1?'curr':''">
              <span class="fs-tit">Time</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="timeStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>

          </div>
        </div>-->
        <div id="J_goodsList" class="goods-list-v2 gl-type-2 J-goods-list">
          <ul class="gl-warp clearfix flex jc">
            <li
              class="gl-item"
              v-for="(item, index) in schemeList"
              :key="index"
              @click="toSchemePage(item)"
            >
              <div class="gl-i-wrap">
                <div class="p-img">
                  <a target="_blank">
                    <a-empty
                      v-if="!item.ImageUrl"
                      style
                      class="empty"
                      :description="'No pictures'"
                    />
                    <img width="220" height="282" :src="item.ImageUrl" @error="errorImg" />
                  </a>
                </div>
                <!-- scroll img -->
                <div class="p-scroll scrolled"></div>

                <div class="p-commit">
                  <div>
                    <strong>
                      Name
                      <a>{{ item.SolutionName }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Company
                      <a>{{ item.Company }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Time
                      <a>{{ item.CreateTime }}</a>
                    </strong>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 分页 -->
        <div id="components-pagination-demo-mini" class="paginationBox">
          <!-- :total="SolutionTotalCount" -->

          <a-pagination
            :total="totalCount"
            show-size-changer
            show-quick-jumper
            class="pagination"
            v-model="listCurrentPage"
            :page-size.sync="listPageSize"
            @change="paginationChange"
            @showSizeChange="paginationChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/layout/pureHeader'
export default {
  data() {
    return {
      SetFilterList: [], //筛选条件集合
      DepartmentList: [],
      cityList: [],
      companyNameList: [],
      isMoreCompany: false,
      isShowAllCity: false,
      SearchText: '',
      theModule: '',
      schemeList: [],
      totalCount: 0,
      listPageSize: 20,
      listCurrentPage: 1,
      menuIndex: 3,
      DDepartment: '',
      EditDeptId: '',
      CreateBy: '',
      DDateList: [],
      city: '',
      pdfUrl: '',
      DeptIdList: '',
      CityList: '',
      CompanyList: '',
      DDeptId: '',
      CityInfo: [],
      Company: '',
      DCompany: '',
      DCity: '',
      City: '',
      DSloution: '',
      DepartmentInfo: [],
      CompanyInfo: [],
    }
  },
  components: {
    Header,
  },
  watch: {
    SetFilterList() {
      this.resetFilter()
    },
  },
  created() {
    if (this.$route.query.index) {
      this.$nextTick(() => {
        this.menuIndex = this.$route.query.index
      })
    }
    this.getCityInfo()
    this.getDeptInfo()
    this.getCompanyInfo()
  },
  mounted() {
    this.getAllSchemeInfo()
  },

  methods: {
    delFliter(index) {
      this.SetFilterList.splice(index, 1)
    },
    // 数组对象去重
    deWeight(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].name == arr[j].name) {
            arr.splice(j, 1)
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--
          }
        }
      }
      return arr
    },
    addtFiltertype(item, type) {
      let obj = item
      obj.type = type
      if (type === 'Company') {
        obj.name = item.Company
        this.SetFilterList.push(obj)
      } else if (type === 'City') {
        obj.name = item.City
        this.SetFilterList.push(obj)
      } else if (type === 'Department') {
        obj.name = item.DeptName
        this.SetFilterList.push(obj)
      }
      this.SetFilterList = this.deWeight(this.SetFilterList)
    },
    getDeptInfo() {
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },
    getCompanyInfo() {
      const a = {
        method: 'SysCompany_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        this.CompanyInfo = result.data.length > 0 ? result.data : []
      })
    },
    getCityInfo() {
      let data = {}
      const a = {
        method: 'SysCity_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: data,
      }
      this.$post(a).then((result) => {
        this.CityInfo = result.data.length > 0 ? result.data : []
      })
    },
    getDepartmentInfo() {
      let data = {}
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: data,
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },
    // 重新配置单一筛选条件数组
    resetFilter() {
      this.CompanyList = []
      this.CityList = []
      this.DepartmentList = []
      this.DeptIdList = []
      this.SetFilterList.map((item) => {
        let type = item.type
        if (type === 'Company') {
          this.CompanyList.push(item.name)
        } else if (type === 'City') {
          this.cityList.push(item.name)
        } else if (type === 'Department') {
          this.DepartmentList.push(item.name)
          this.DeptIdList.push(item.DeptId)
        }
      })
      // console.log('this.SetFilterList :>> ', this.SetFilterList)

      this.getAllSchemeInfo()
    },
    paginationChange(page, pageSize) {
      console.log(page, pageSize)
      this.listCurrentPage = page
      this.listPageSize = pageSize
      this.getAllSchemeInfo()
    },
    toSchemePage(item) {
      console.log('item :>> ', item)
      let data = JSON.stringify(item)
      //生成pdf 并打开预览
      if (item.PdfFile) {
        // window.open(item.PdfFile)
        window.open(
          item.PdfFile,
          'pdf',
          'height=698, width=1200,left=298,top=100'
        )
      } else {
        this.$message.warning('PDF is not uploaded for this scenario')
      }
    },
    errorImg(event) {
      this.$pk.errorImg(event)
    },
    SearchBtn(e) {
      // console.log('e :>> ', e)
      this.SearchText = e
      this.getAllSchemeInfo()
    },
    showAllProject(type) {
      if (type === 'company') {
        this.isMoreCompany = !this.isMoreCompany
      } else if (type === 'city') {
        this.isShowAllCity = !this.isShowAllCity
      }
    },
    getSearchInfo(e) {
      // console.log('搜索内容', e)
      if (e) {
        this.SearchText = e[0]
        this.theModule = e[1]
      }
    },
    getAllSchemeInfo() {
      const a = {
        method: 'ShpSupplierSolution_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.listCurrentPage,
        limit: this.listPageSize,
        language: window.language || 1,
        datas: {
          SolutionName: this.SearchText ? `%${this.SearchText}%` : '',
          DeptIdList: this.DeptIdList,
          CityList: this.cityList,
          CompanyList: this.CompanyList,
        },
      }
      this.$post(a).then((result) => {
        this.$nextTick(() => {
          this.schemeList = result.data
          this.totalCount = result.count
          this.schemeList.map((item) => {
            item.CreateTime = item.CreateTime
              ? item.CreateTime.replace('T', '').substr(0, 10)
              : ''
            return item
          })
        })
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import url('css/supplierSolution.less');
</style>
